<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
    <script src="intelxdk.js"></script>
    <script src="cordova.js"></script>
    <script src="xhr.js"></script>
    
    <script src="js/app.js"></script>
    <script src="js/init-app.js"></script>
    <script src="js/init-dev.js"></script>
    
    <script type="application/javascript" src="js/jquery.min.js"></script>
    <script type="application/javascript" src="js/md5.js"></script>
    <script type="application/javascript" src="js/jquery.cookie.min.js"></script>
    <script type="application/javascript" src="js/menu.js"></script>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>

<style type="text/css">        
    
@media screen and (orientation:portrait) and (max-height: 1000px){ 
        #wrapper{
            width: 100%;
            height: 100%;
            margin-left: 30%;
            margin-top: 50%;

        }
        #background{
            position:fixed;
            margin-left: -28%;
            margin-top: -50%;
        }
        #img{
            content: url('img/login/loginPrt.png');
            position: fixed;
            max-height: 20000px;
            max-width: 100%;
        }
        
        #emailDiv{
            position: fixed;
            margin-top:10%;
            margin-left:-10%;
        }
        #passDiv{
            position: fixed;
            margin-top:30%;
            margin-left:-10%;
        }
        #checkDiv{
            color:white;
            position: fixed;
            margin-top:50%;
            margin-left:0%;
        }
        #email, #password{
            position: fixed;
            color:white;
            background-color: transparent;
            font-size: 20px;
            width: 70%;
            min-height: 60px;
            margin-left: 0%;
            margin-top: 0.3%;
        }
        #imgName, #imgPass{
            position: fixed;
            margin-left:-10%;
            width: 83%;
            min-height: 70px;
        }
        
        #buttonsDiv{
            position: fixed;
            margin-top: 60%;
            margin-left: -15%;
        }
        #btnLogin, #btnSignUp{
            float:left;
            width:30%;
            padding-left:20px;
            padding-right:20px;
        }
    }    

@media screen and (orientation:landscape) and (max-width: 1000px){  
        #wrapper{
            width:100%;
            height: 100%;
            margin-left:30%;
            margin-top: 11.5%;

        }
        #background{
            position:fixed;
            margin-left: -28%;
            margin-top: -10%;
        }
        #img{
            content: url('img/register/landscape.png');
            position: fixed;
            max-height: 2000px;
            max-width: 100%;
        }
        
        #emailDiv{
            position: fixed;
            margin-left:-10%;
            margin-top: 5%;
        }
        #passDiv{
            position: fixed;
            margin-top:15%;
            margin-left:-10%;
        }
        #checkDiv{
            color:white;
            position: fixed;
            margin-top:25%;
            margin-left:0%;
        }
        #email, #password{
            position: fixed;
            color:white;
            background-color: transparent;
            font-size: 25px;
            width: 43%;
            min-height: 40px;
            margin-left: 11%;
            margin-top: 0.3%;
        }
        #imgName, #imgPass{
            position: fixed;
            margin-left:5%;
            width: 50%;
            max-height: 50px;
        }
        
        #buttonsDiv{
            position: fixed;
            margin-top: 30%;
            margin-left: -10%;
        }
        #btnLogin, #btnSignUp{
            float:left;
            width:30%;
            padding-left:20px;
            padding-right:20px;
        }
    }

@media screen and (orientation:portrait) and (min-height: 1000px){    
        #wrapper{
            position:fixed;
            width: 100%;
            height: 100%;
            margin-left:0%;
            margin-top: 0%;

        }
        #background{
            position:fixed;
            margin-left: 0%;
            margin-top: 0%;
        }
        #img{
            content: url('img/login/loginPrt.png');
            position: fixed;
            max-height: 20000px;
            max-width: 100%;
        }
        
        #emailDiv{
            position: fixed;
            margin-top:35%;
            margin-left:10%;
        }
        #passDiv{
            position: fixed;
            margin-top:45%;
            margin-left:10%;
        }
        #checkDiv{
            color:white;
            position: fixed;
            margin-top:55%;
            margin-left:20%;
        }
        #email, #password{
            position: absolute;
            color:white;
            background-color: transparent;
            font-size: 50px;
            width: 450px;
            min-height: 80px;
            left: 120px;
            margin-top: 5px;
        }
        #imgName, #imgPass{
            position: absolute;
            left:50px;
            max-height: 100px;
            width: 20vw;
        }
        
        #buttonsDiv{
            position: fixed;
            margin-top: 60%;
            margin-left: 10%;
        }
        #btnLogin{
            position: absolute;
            width:300px;
            left:0px;
        }
        #btnSignUp{
            position: absolute;
            width:300px;
            left:350px;
        }
    }
    
@media screen and (orientation:landscape) and (min-width: 1000px){ 
        #wrapper{
            width:100%;
            height: 100%;
            margin-left:0%;
            margin-top: 0%;
        }
        #background{
            position:fixed;
            margin-left: 0%;
            margin-top: 0%;
        }
        #img{
            content: url('img/login/loginLnd.png');
            position: fixed;
            max-height: 2000px;
            max-width: 100%;
        }
        
        #emailDiv{
            position: fixed;
            margin-top:25%;
            margin-left:20%;
        }
        #passDiv{
            position: fixed;
            margin-top:40%;
            margin-left:20%;
        }
        #checkDiv{
            color:white;
            position: fixed;
            margin-top:54%;
            margin-left:30%;
        }
        #email, #password{
            position: absolute;
            color:white;
            background-color: transparent;
            font-size: 60px;
            width: 450px;
            min-height: 80px;
            left: 160px;
            margin-top: 5px;
        }
        #imgName, #imgPass{
            position: absolute;
            left:100px;
            width: 50vw;
            max-height: 97px;
        }
        
        #buttonsDiv{
            position: fixed;
            margin-top: 60%;
            margin-left: 20%;
        }
        #btnLogin{
            position: absolute;
            width:350px;
            left:0px;
        }
        #btnSignUp{
            position: absolute;
            width:350px;
            left:400px;
        }
    }
</style>
    
</head>    
    
<body> 
    <div id='wrapper'>
        <div id='background'>
            <img alt='login' id='img'/>
        </div>
        <div id='emailDiv'>
            <img src='img/login/username.png' alt='login' id='imgName'/>
            <input type='text' placeholder="E-mail" id='email' tabindex=1 />
        </div>
        <div id='passDiv'>
            <img src='img/login/password.png' alt='login' id='imgPass'/>
            <input type='password' placeholder="Password" id='password' tabindex=2 />
        </div>
        <div id='checkDiv'>
            <input type="checkbox" value='remember' name='remember' id='rememberCheck' tabindex=3 />Remember me
        </div>
        <div id='buttonsDiv'>
            <img id='btnLogin' alt='btnLogin' src='img/login/btnLogin.png' tabindex=4 onclick='initLogin()'/>
            <img type="image" id='btnSignUp' alt='btnSignUp' src='img/login/btnSignUp.png' tabindex=5 onclick='window.location.href="register.html"' />
        </div>
        
    </div>
    
    <script>
        var savePass = false;
        
		// Wait for Cordova to load
		//
        document.addEventListener("backbutton",backKeyDown, false);
		document.addEventListener("deviceready", onDeviceReady, false);
		document.addEventListener("keypress", onkeypress, false);
        
		function onDeviceReady()
        {
            window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFDRead, fail);
		}

        function backKeyDown()
        {
            /*var exit = confirm('Do you want to exit?');
            if(exit){
                //alert('close app');
                navigator.app.exitApp();
            }*/
                navigator.app.exitApp();
        }
        
        $( window ).unload(function(){
        
            document.removeEventListener("backbutton", backKeyDown, false);
        
        });
        
        $(document).ready(function(){            
            if(getUserId())
            {
                window.location.href='menu.html'
            }
        });
        
        $("#rememberCheck").on('click', function(){
            if(this.checked == true)
            {
                var confirmation = confirm('Do you want to save your password to this device?');
                if(confirmation){
                    savePass = true;
                }
                else{
                    savePass = false;
                    this.checked = false;
                }
            }
            else
            {
                savePass = false;
            }
        });
        
        //Next tab on "enter" if e-mail is active element
        //initLogin() on "enter" if password is active element
        function onkeypress(e){
            if(e.which == 13 && document.activeElement.id == 'email')
            {
                $('#password').focus();
            }
            else if(e.which == 13 && document.activeElement.id == 'password')       //Return key
            {
                initLogin();
            }
        }
        
        function initLogin(){
            var email = document.getElementById('email').value,
                password = document.getElementById('password').value.length;
            
            
            if( email != '' && password > 0 ){ 
                var md5pass = md5(document.getElementById('password').value);
                
                try
                {
                    if(savePass){
                        
                        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFD, fail);
                        
                    }
                    
                    login(email, md5pass);
                }
                catch(err){
                    alert(err.name + '\n' + err.message);
                } 
            }
        }
        
        ///Read section
        
        function gotFDRead(fileSystem) {
        fileSystem.root.getDirectory("Hexar", {create: false}, onGetDirectoryWinRead, fail);
		}
			
		function onGetDirectoryWinRead(parent){
			parent.getFile("config.txt", {create: false}, gotFileEntryRead, fail);
		}

		function gotFileEntryRead(fileEntry) {
			fileEntry.file(readAsText, fail);
		}
		
		function readAsText(file) {
			var reader = new FileReader();
			reader.onloadend = function(evt) {
				console.log("Read as text");
				var array = (evt.target.result.split(/[\r\n]+/g));
				
                
                try
                {
                    login(array[0], array[1]);
                }
                catch(err){
                    alert(err.name + '\n' + err.message);
                } 
			};
			reader.readAsText(file);
		}
        
        ///Write section
        
        //get Directory
        function gotFD(fileSystem) {
			fileSystem.root.getDirectory("Hexar", {create: true}, onGetDirectoryWin, fail);
		}
		
        //get/create file
		function onGetDirectoryWin(parent){
			parent.getFile("config.txt", {create: true, exclusive: false}, gotFileEntry, fail);
		}
		
        //on successful create/retrieve file
		function gotFileEntry(fileEntry) {
			fileEntry.createWriter(gotFileWriter, fail);
		}
        
        //write to file
		function gotFileWriter(writer) {
            var mail = document.getElementById('email').value,
                pass = md5(document.getElementById('password').value);
            
			writer.write(mail + "\n" + pass);
			writer.onwriteend = function(evt) {
				console.log("contents of file now: " + mail + "\n" + pass);
			};
		}

		function fail(error) {
			console.log(error.code);
		}
    </script>
</body>
</html>
